<template>
    <div>
        <el-row>
            <el-col ref="layoutMain" style="padding: 0 10px">
                <el-row>
                    <el-form>
                        <el-col :span="6">
                            <el-form-item label="检查类型:">
                                <el-select v-model="checkCategorySelected" placeholder="请选择检查类型"
                                    @change="checkCategoryChange" :disabled="!isFirstOpinion" size="mini"
                                    style="width: 210px">
                                    <el-option v-for="item in checkCategoryList" :key="item.id" :label="item.label"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="病理号:">
                                <el-input v-model="diagnosis.pathologyId" placeholder="病理编号"
                                    class="input-form redcolor-input" style="margin: 0 10px;" size="mini">
                                </el-input>
                            </el-form-item>
                        </el-col>

                    </el-form>
                </el-row>

                <div ref="baseInfo" style="font-size: 12px">
                    <el-row>
                        <el-col v-for="info in baseInfoList" :span="info.span" :key="info.key">
                            <span>{{ info.label }}{{ info.value }}</span>
                        </el-col>
                    </el-row>
                </div>

                <div v-if="!isAssigned">未分配</div>
                <div v-else>
                    <el-row v-if="reportTemplateReady" style="margin-top: 10px" align="middle" type="flex"
                        justify="space-between">
                        <el-tabs v-model="opinionTabActive" type="card" ref="diagnosisLevelTabs"
                            :before-leave="opinionTabChange">
                            <el-tab-pane v-for="item of opinionTabList" :label="item.tabLabel" :name="item.name.toString()"
                                :key="item.name.toString()">
                            </el-tab-pane>
                        </el-tabs>

                    </el-row>

                    <el-row v-if="annotationsList.length > 0" type="flex" justify="center">
                        <div class="annotation-row">
                            <span>病理图像:</span>
                            <div>
                                <img v-for="(item, index) in annotationsList" class="annotation-img" :src="item.imageUrl"
                                    @click="OpenImage(item.imageUrl)" :key="index" alt="" />
                            </div>
                        </div>
                    </el-row>
                    <div v-if="reportTemplateReady" class="container-narrow">
                        <grid-layout id="custom-report" :layout.sync="componentList" :col-num="reportTemplateCol"
                            :row-height="28" :is-draggable="false" :is-resizable="false" :is-mirrored="false"
                            :vertical-compact="true" :use-css-transforms="true">
                            <grid-item v-for="(item, index) in componentList" :x="item.x" :y="item.y" :w="item.w"
                                :h="item.h" :i="item.i" :key="index">
                                <el-row v-if="item.smallType === 'space'" class="row-in-grid-item"></el-row>

                                <hr v-else-if="item.smallType === 'hr'" />

                                <el-row v-else-if="item.smallType === 'text'" class="row-in-grid-item">
                                    <span :style="styleString(item.styleJson)" @click="aiValueToAssign(item.stringContent)">
                                        {{ item.stringContent }}
                                    </span>
                                </el-row>

                                <el-row v-else-if="item.smallType === 'input'" class="row-in-grid-item">
                                    <div :id="item.i" style="width: 100%; height: 100%">
                                        <el-input v-if="item.isInputArea" type="textarea" v-model="detailForm[item.i]"
                                            :autosize="{
                                                minRows: 1,
                                                maxRows: parseInt(
                                                    (item.h * 5) / 3,
                                                    10
                                                ),
                                            }" :placeholder="item.placeholder" :style="styleString(item.styleJson)"
                                            :disabled="!isThisOpinionTab" size="mini">
                                        </el-input>
                                        <el-input v-else v-model="detailForm[item.i]" :placeholder="item.placeholder"
                                            :style="styleString(item.styleJson)" :disabled="!isThisOpinionTab" size="mini">
                                        </el-input>
                                    </div>
                                </el-row>

                                <el-row v-else-if="item.smallType === 'selection'" class="row-in-grid-item">
                                    <div :id="item.i" style="width: 100%; height: 100%">
                                        <el-select v-model="detailForm[item.i]" :placeholder="item.placeholder"
                                            :style="styleString(item.styleJson)" :disabled="!isThisOpinionTab" size="mini">
                                            <el-option v-for="(
                                                    t, index
                                                ) in item.selectDataJson" :key="index" :label="t" :value="t">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-row>

                                <el-row v-else-if="item.smallType === 'special'" class="row-in-grid-item">
                                    <!--病理图像判断-->
                                    <div v-if="item.i ===
                                        'special_normal_pathologyFiles'
                                        " style="width: 100%; height: 100%">
                                        <span style="float: left">{{
                                            item.stringContent
                                        }}</span>
                                    </div>
                                    <!--签名图像-->
                                    <div v-else-if="item.i ===
                                            'special_base_reportDoctor'
                                            ">
                                        <span>{{ item.stringContent }}</span>
                                    </div>
                                    <!--特殊检查-导入-->
                                    <div v-else-if="item.i === 'special_normal_import'
                                        " style="margin-left: 10px">
                                        <el-button size="mini" type="text" @click="detailSpecialCheckImport">
                                            {{ item.stringContent }}
                                        </el-button>
                                    </div>
                                    <div v-else-if="item.i ===
                                        'special_clearable_microFingings'
                                        " style="margin-left: 10px">
                                        <el-button size="mini" type="text" :disabled="!isThisOpinionTab"
                                            @click="detailMicroFingingsClear">
                                            {{ item.stringContent }}
                                        </el-button>
                                    </div>
                                    <div v-else-if="item.i ===
                                        'special_clearable_specialCheck'
                                        " style="margin-left: 10px">
                                        <el-button size="mini" type="text" :disabled="!isThisOpinionTab"
                                            @click="detailSpecialCheckClear">
                                            {{ item.stringContent }}
                                        </el-button>
                                    </div>
                                    <div v-else-if="item.i ===
                                        'special_clearable_diagnose'
                                        " style="margin-left: 10px">
                                        <el-button size="mini" type="text" :disabled="!isThisOpinionTab"
                                            @click="detailDiagnoseClear">
                                            {{ item.stringContent }}
                                        </el-button>
                                    </div>
                                </el-row>
                            </grid-item>
                        </grid-layout>
                    </div>
                </div>
            </el-col>
        </el-row>

    </div>
</template>

<script>
import _ from 'lodash';
import VueGridLayout from 'vue-grid-layout';
import BaseTable from '@templates/components/BaseTable';
import diagnosisDefaultBase from '@templates/diagnosisDefault';
import DiagnosisSpecialAdvice from '@templates/components/DiagnosisSpecialAdvice';
import DiagnosisTechAdvice from '@templates/components/DiagnosisTechAdvice';
import moment from 'moment';
import OpinionBottom from './OpinionBottom';

const echarts = require('echarts');

const diagnosisDefault = _.clone(diagnosisDefaultBase);
diagnosisDefault.collectionId = 0;

const userLevelBase = [
    {
        level: 2,
        label: '初诊',
    },
    {
        level: 3,
        label: '核发',
    },
    {
        level: 4,
        label: '审核',
    },
    {
        level: 5,
        label: '终审',
    },
];
// 加做类型
const doctorAdviceMapBase = [
    {
        key: 'ss',
        type: 1,
        label: '特殊染色',
        isWithPackage: false,
    },
    {
        key: 'mo',
        type: 2,
        label: '分子病理',
        isWithPackage: true,
    },
    {
        key: 'ihc',
        type: 3,
        label: '免疫组化',
        isWithPackage: true,
    },
    {
        key: 'tec',
        type: 4,
        label: '技术医嘱',
        isWithPackage: false,
    },
];
export default {
    name: 'DiagnosisMatchDetailOpinion',
    components: {
        OpinionBottom,
        GridLayout: VueGridLayout.GridLayout,
        GridItem: VueGridLayout.GridItem,
        BaseTable,
        DiagnosisSpecialAdvice,
        DiagnosisTechAdvice,
    },
    props: {
        diagnosis: {
            type: Object,
            default: diagnosisDefault,
        },
    },
    data() {
        return {
            AnnotationsServiceURL: process.env.pathologyServiceURL,
            selectedList: [], // 多选 全选 数据
            activeDoctorId: 0,
            isInvited: false,
            // 当前展示的诊断医生级别
            activeLevel: 0,

            imageServiceURL: process.env.ImageServiceURL,
            doctorAdviceMap: doctorAdviceMapBase,
            userLevel: userLevelBase,
            layoutTemplateCol: 5,
            isShowLayoutAiInfo: false,

            diagnosisExpandList: [],

            // 加做项目数据
            // specialAdviceCount: 0,
            // techAdviceCount: 0,
            specialExtraProjectList: [],
            techExtraProjectList: [],
            dictionaryMap: [
                {
                    code: 'checkCategory',
                    array: 'checkCategoryList',
                },
                {
                    code: 'coincidenceRate',
                    array: 'frozenCoincidenceRateList',
                },
                {
                    code: 'coincidenceRate',
                    array: 'diagnosticAccordanceRateList',
                },
                {
                    code: 'careful',
                    array: 'DiagnosticCarefulnessRateList',
                },
                {
                    code: 'sliceQuality',
                    array: 'biopsyQualityList',
                },
                {
                    code: 'scanningQuality',
                    array: 'scanQualityList',
                },
            ],
            frozenCoincidenceRateList: [],
            diagnosticAccordanceRateList: [],
            DiagnosticCarefulnessRateList: [],
            biopsyQualityList: [],
            scanQualityList: [],

            checkCategorySelected: '',
            checkCategoryList: [],
            opinionTabActiveLevel: '',
            opinionTabActive: '',
            opinionTabList: [],

            annotationsList: [],

            // 基础信息字段列表
            baseInfoList: [
                {
                    span: 4,
                    value: '',
                    key: 'name',
                    label: '姓名：',
                },
                {
                    span: 4,
                    value: '',
                    key: 'sexName',
                    label: '性别：',
                },
                {
                    span: 4,
                    value: '',
                    key: 'ageAll',
                    label: '年龄：',
                },
                {
                    span: 8,
                    value: '',
                    key: 'cardId',
                    label: '身份证号：',
                },
                {
                    span: 4,
                    value: '',
                    key: 'sendDoctor',
                    label: '送检医生：',
                },
                {
                    span: 4,
                    value: '',
                    key: 'sendDepartment',
                    label: '送检科室：',
                },
                {
                    span: 4,
                    value: '',
                    key: 'wardName',
                    label: '病区名称：',
                },
                {
                    span: 4,
                    value: '',
                    key: 'bedId',
                    label: '床位号：',
                },
                {
                    span: 4,
                    value: '',
                    key: 'specimenName',
                    label: '标本名称：',
                },
                {
                    span: 4,
                    value: '',
                    key: 'specimenTypeName',
                    label: '标本类型：',
                },
                {
                    span: 4,
                    value: '',
                    key: 'specimenRegisterTime',
                    label: '标本登记时间：',
                },
            ],
            // 模板初始化完成确认
            reportTemplateReady: false,
            // 意见数据表单
            detailForm: {},
            // 意见数据缓存
            detailCache: {},
            // 模板组件列表
            componentList: [],
            reportTemplateCol: 12,

            // 下方标签页数据
            ReportData: [],
            selectionItemsvalue: [],
            selectionItemsFilter: {},
            activeName1: 'first',
            reportActiveName: 'tezheng',
            inspectionloading: false,
            picLoading: false,
            // 趋势图弹窗
            PICdialogVisible: false,
            PicSelectionItemsData: [],
            SelectionItemsData: [],
            picForm: {},

            AIEvaluationForm: {
                chronicInflammationAi: '', //慢性炎症
                imAi: '', //肠化
                atrophyAi: '', //萎缩
                activityAi: '', //活动度
                hpai: '', //HP
                alienGrowthAi: '', //异性增生
            },
            predStatus: 'true',
            beClickedDoctor: '', //被点击的医生名字
        };
    },

    async mounted() {
        this.diagnosis.cardId = this.diagnosis.cardId;
        // 字典数据获取
        this.dictionariesRequest(this.dictionaryMap);
        this.opinionTabActive += this.diagnosis.diagnosisDetailList[0].id;

        /* eslint no-await-in-loop:0 */
        this.opinionTabList = [];
        for (let i = 0; i < this.diagnosis.diagnosisDetailList.length; i++) {
            const t = this.diagnosis.diagnosisDetailList[i];
            const levelItem = this.userLevel.find(
                (item) => item.level === t.currentLevel
            );
            if (t.diagnosisType == 1) {
                levelItem.tabLabel = `邀请(${t.doctorName})`;
            } else {
                levelItem.tabLabel = `${levelItem.label}(${t.doctorName})`;
            }
            levelItem.name = t.id;
            this.opinionTabList.push(JSON.parse(JSON.stringify(levelItem)));
        }
        // 基本信息格式化
        this.baseInfoList.forEach((info, index) => {
            this.baseInfoList[index].value = _.get(
                this.diagnosis,
                info.key,
                ''
            );
        });
        this.checkCategorySelected = this.diagnosis.checkCategory;
        this.reportTemplateRequest();
        //一个诊断会有多张切片，一个切片对应一个ai，如果有多张默认取第一张切片ai
        if (this.diagnosis.biopsyList.length > 0) {
            this.diagnosis.biopsyList.forEach((item) => {
                this.getAiEvaluation(item.id);
            });
        }
    },
    computed: {
        levelLabel() {
            return _.get(this.diagnosis, 'currentLevelLabel', '');
        },

        diagnosisId() {
            return _.get(this.diagnosis, 'id', 0);
        },
        diagnosisLevel() {
            return _.get(this.diagnosis, 'currentLevel', 0);
        },
        diagnosisPrevLevel() {
            return _.get(this.diagnosis, 'prevLevel', 0);
        },

        isAssigned() {
            return this.diagnosisLevel !== 1;
        },
        isFinished() {
            return this.diagnosisLevel === 6;
        },
        isFirstOpinion() {
            return this.diagnosisPrevLevel === 1;
        },
        isThisOpinionTab() {
            return false;
        },
    },

    methods: {
        //一个诊断会有多张切片，一个切片对应一个ai，如果有多张默认取第一张切片ai
        getAiEvaluation(biopsyId) {
            let _this = this;
            _this
                .$axios({
                    method: 'GET',
                    url: `${_this.AnnotationsServiceURL}/annotations/results/aiprediction/${biopsyId}`,
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        if (res.data.data.info.pred === 0) {
                            this.predStatus = 'false';
                            res.data.data.info.resultLevel.forEach((item) => {
                                if (item.key === '肠化') {
                                    _this.AIEvaluationForm.imAi = item.value;
                                }
                                if (item.key === '萎缩') {
                                    _this.AIEvaluationForm.atrophyAi =
                                        item.value;
                                }
                                if (item.key === '活动性') {
                                    _this.AIEvaluationForm.activityAi =
                                        item.value;
                                }
                                if (item.key === '慢性炎症') {
                                    _this.AIEvaluationForm.chronicInflammationAi =
                                        item.value;
                                }
                                if (item.key === 'HP') {
                                    _this.AIEvaluationForm.hpai = item.value;
                                }
                                if (item.key === '异性增生') {
                                    _this.AIEvaluationForm.alienGrowthAi =
                                        item.value;
                                }
                            });
                        }
                    }
                });
        },

        dictionariesRequest(dictMap) {
            // 字典数据请求
            dictMap.forEach(async (map) => {
                const res = await this.$axios({
                    method: 'GET',
                    url: '/PROXY-Remote/dicts/list',
                    params: {
                        code: map.code,
                        page: 0,
                        size: 99,
                    },
                });

                if (res && res.data.code === 200) {
                    const result = res.data;
                    result.data.forEach((t) => {
                        this[map.array].push({
                            id: t.id,
                            label: t.name,
                        });
                    });
                }
            });
        },

        // 依据 level 获取诊断详情
        detailGetByLevel(currentLevel) {
            const level =
                currentLevel === 6 ? this.diagnosisPrevLevel : currentLevel;
            return this.diagnosis.diagnosisDetailList.find(
                (t) => t.currentLevel === level && t.diagnosisType == 0
            );
        },

        // 标注数据
        annotationChange(level) {
            const current = level || this.activeLevel;
            const detail = this.detailGetByLevel(current);
            const doctorId = _.get(detail, 'doctorId', 0);
            this.annotationsList = [];
            this.diagnosis.annotationsList.forEach((t) => {
                if (t.userId === doctorId) {
                    this.annotationsList.push(t);
                }
            });
        },
        detailGetById(id) {
            return this.diagnosis.diagnosisDetailList.find((t) => t.id == id);
        },
        // 意见 - 查看他人时，保存表单数据到缓存，加载缓存数据到表单
        opinionTabChange(activeTab, oldActiveTab) {
            if (activeTab == 0) return;
            const that = this;
            const opinionSave = function () {
                that.detailCache = JSON.parse(JSON.stringify(that.detailForm));
            };
            const opinionLoadFromTemp = function () {
                that.detailForm = _.clone(that.detailCache);
            };
            const activeLevel = parseInt(
                that.opinionTabList.find((t) => t.name == activeTab).level,
                10
            );
            const oldActiveLevel =
                oldActiveTab == 0
                    ? 0
                    : parseInt(
                        that.opinionTabList.find(
                            (t) => t.name == oldActiveTab
                        ).level,
                        10
                    );
            that.activeLevel = activeLevel;
            that.annotationChange(activeLevel);
            that.opinionLoadFromLevel(activeTab);
        },
        // 医生诊断数据
        opinionLoadFromLevel(id) {
            let that = this;
            let mActiveEntity = that.detailGetById(id);
            that.activeDoctorId = mActiveEntity.doctorId;
            that.isInvited = mActiveEntity.diagnosisType == 0 ? false : true;
            that.beClickedDoctor = mActiveEntity.doctorName; //点击那个医生 显示复制那个医生的诊断
            const detailJson = mActiveEntity.detailJson;
            that.detailForm = _.clone(detailJson);
            // 设置未填写值为空格 (不显示placeholder)
            Object.keys(that.detailForm).forEach((key) => {
                if (that.detailForm[key] === '') {
                    that.detailForm[key] = ' ';
                }
            });
        },

        // 报告模板获取
        async reportTemplateRequest() {
            this.reportTemplateReady = false;
            if (!this.isAssigned) {
                return;
            }
            const res = await this.$axios({
                method: 'GET',
                url: '/PROXY-Remote/report-templates/check-category',
                params: {
                    checkCategory: this.diagnosis.checkCategory,
                },
            });

            if (res && res.data.code === 200) {
                const result = res.data.data;
                this.reportTemplateCol = _.get(result, 'settingsColNum', 12);
                this.componentList = [];
                this.detailForm = _.clone({});
                this.detailCache = _.clone({});

                // 加载数据到表单缓存
                result.reportTemplateComponents.forEach((t, index) => {
                    // 忽略基本信息项
                    if (t.bigType === 'base') {
                        return;
                    }
                    // 为可输入项设置初始值
                    if (
                        t.smallType === 'input' ||
                        t.smallType === 'selection'
                    ) {
                        this.detailCache[t.i] = '';
                    }

                    const item = t;
                    item.index = index;
                    this.componentList.push(item);
                });

                const { detailJson } = this.detailGetByLevel(
                    this.diagnosisLevel
                );
                Object.keys(this.detailCache).forEach((key) => {
                    this.detailCache[key] = _.get(detailJson, key, '');
                });

                // 初始化填写表单的 setter 和 getter
                this.detailCache = _.clone(this.detailCache);
                // 加载数据到表单
                const activeLevel = this.isFinished
                    ? this.diagnosisPrevLevel
                    : this.diagnosisLevel;
                this.opinionTabChange(
                    this.diagnosis.diagnosisDetailList[0].id,
                    0
                );
            }

            this.reportTemplateReady = true;
        },
        // 报告模板组件样式
        styleString(styleJson) {
            let style = 'width: 100%; word-break:break-all;';
            Object.keys(styleJson).forEach((key) => {
                style += `${key}:${styleJson[key]};`;
            });
            return style;
        },
        // 检查类型 - 变更
        checkCategoryChange() {
            this.$confirm(
                '切换检查类型将导致填写数据丢失, 是否继续？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(async () => {
                    await this.diagnosisCheckCategorySave();
                })
                .catch(() => {
                    this.checkCategorySelected = this.diagnosis.checkCategory;
                });
        },
        OpenImage(herf) {
            const width = window.screen.availWidth + 10;
            const height = window.screen.availHeight + 10;
            window.open(
                herf,
                '_blank',
                `location=no,width=${width},height=${height}`
            );
        },
        detailSpecialCheckImport() {
            const i = 'input_normal_specialCheck';
            if (
                this.detailForm[i] === null ||
                this.detailForm[i] === undefined
            ) {
                this.$message.warning("未找到'特殊检查'组件，请联系管理员");
                return;
            }

            const textGroup = [];
            this.specialExtraProjectList.forEach((t) => {
                let text = '';
                if (textGroup.length > 0 && textGroup.length % 2 === 0) {
                    text += '\n';
                }
                const type = this.doctorAdviceMap.find(
                    (item) => item.type === t.doctorType
                );
                text += `${type.label} ${t.doctorAdviceName}：        `;
                textGroup.push(text);
            });
            this.techExtraProjectList.forEach((t) => {
                let text = '';
                if (textGroup.length > 0 && textGroup.length % 2 === 0) {
                    text += '\n';
                }
                const type = this.doctorAdviceMap.find(
                    (item) => item.type === t.doctorType
                );
                text += `${type.label} ${t.doctorAdviceName}：        `;
                textGroup.push(text);
            });

            if (textGroup.length === 0) {
                this.$message.info('暂无数据导入');
            } else {
                let data = '';
                // for (const t of textGroup) { data += t; }
                textGroup.forEach((ele) => {
                    data += ele;
                });
                this.detailForm[i] = data;
            }
        },
        detailSpecialCheckClear() {
            const i = 'input_normal_specialCheck';
            if (
                this.detailForm[i] === null ||
                this.detailForm[i] === undefined
            ) {
                this.$message.warning("未找到'特殊检查'组件，请联系管理员");
            } else {
                this.detailForm[i] = '';
            }
        },
        detailMicroFingingsClear() {
            const i = 'input_normal_microFingings';
            if (
                this.detailForm[i] === null ||
                this.detailForm[i] === undefined
            ) {
                this.$message.warning("未找到'镜下所见'组件，请联系管理员");
            } else {
                this.detailForm[i] = '';
            }
        },
        detailDiagnoseClear() {
            const i = 'input_normal_diagnose';
            if (
                this.detailForm[i] === null ||
                this.detailForm[i] === undefined
            ) {
                this.$message.warning("未找到'病理诊断'组件，请联系管理员");
            } else {
                this.detailForm[i] = '';
            }
        },

        // 检验项目趋势图条件
        PicSelectionItemschange() {
            if (this.PicSelectionItemsData !== '') {
                this.SelectionItemsData.forEach((temp) => {
                    if (temp.value === this.PicSelectionItemsData) {
                        this.$refs.bottom.qsPIC(temp.label);
                    }
                });
            }
        },
        // 渲染趋势图
        getPicData(row, picVisible, filterData) {
            const filter = { eventNames: row };
            this.SelectionItemsData = filterData;
            this.picLoading = true;
            this.PICdialogVisible = picVisible;
            this.PicSelectionItemsData = row;
            let result;
            try {
                let url = `/PROXY-aiSearch/lis/special-index?page=1&patientId=${this.diagnosis.patientId}&size=1000`;
                const datas = [];
                const params = {};
                if (filter.ycts) {
                    params.ycts = encodeURIComponent(filter.ycts);
                }
                if (filter.eventNames) {
                    params.eventNames = encodeURIComponent(filter.eventNames);
                }
                Object.getOwnPropertyNames(params).forEach((key) => {
                    const value = params[key];
                    if (value) {
                        datas.push(`${key}=${value}`);
                    }
                });
                if (datas.length > 0) {
                    url = `${url}&${datas.join('&')}`;
                }

                console.log('get-getPicData', url);
                this.$axios({
                    // 详见 axios 请求配置项
                    method: 'GET',
                    url,
                }).then((res) => {
                    // 请求失败
                    if (res.data.code !== 200) {
                        throw new Error(res.data);
                    }
                    result = res.data.data;
                    console.log('result-getPicData', result);
                    this.drawChart(result, row);
                    // 请求成功
                });
            } catch (e) {
                // 跳出
            }
            return result;
        },
        drawChart(result, row) {
            // 基于准备好的dom，初始化echarts实例
            if (result) {
                const xAxisData = [];
                const seriesData = [];
                // 对日期进行排序
                const tempData = result.sort((a, b) =>
                    a.consequence_time > b.consequence_time ? 1 : -1
                );
                tempData.forEach((a) => {
                    xAxisData.push(
                        moment(a.consequence_time).format('YYYY/MM/DD')
                    );
                    seriesData.push(a.consequence);
                })
                // for (const a of tempData) {
                //     xAxisData.push(
                //         moment(a.consequence_time).format('YYYY/MM/DD')
                //     );
                //     seriesData.push(a.consequence);
                // }
                const myChart = echarts.init(
                    document.getElementById('examLevel')
                );
                const option = {
                    title: {
                        text: row,
                        x: 'center',
                    },
                    tooltip: {
                        trigger: 'axis',
                    },
                    toolbox: {
                        show: false,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none',
                            },
                            dataView: { readOnly: false },
                            magicType: { type: ['line', 'bar'] },
                            restore: {},
                            saveAsImage: {},
                        },
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxisData,
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '数值',
                            type: 'line',
                            data: seriesData,
                            markPoint: {
                                data: [
                                    {
                                        type: 'max',
                                        name: '最大值',
                                    },
                                    {
                                        type: 'min',
                                        name: '最小值',
                                    },
                                ],
                            },
                            markLine: {
                                data: [
                                    {
                                        type: 'average',
                                        name: '平均值',
                                    },
                                ],
                            },
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                this.picLoading = false;
            }
        },
    },
};
</script>

<style scoped>
.diagnosis-template-tree {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.diagnosis-template-tree-message {
    font-size: 14px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.container-narrow {
    margin: 0 auto;
    max-width: 800px;
    height: max-content;
    background: #ffffff;
}

.button-list-item {
    /*margin-right: 10px;*/
    /*width: 90px;*/
}

.tag-list-item {
    margin-right: 10px;
}

.quality-list-item {
    width: 100px;
}

.row-in-grid-item {
    min-height: 28px;
    display: flex;
    align-items: center;
}

.annotation-row {
    padding: 10px;
    max-width: 800px;
    height: 50px;
    line-height: 50px;
    display: flex;
    width: 100%;
}

.annotation-img {
    width: 50px;
    height: 50px;
    margin-right: 8px;
    cursor: pointer;
}

.invite-y-scroll {
    height: 472px;
    overflow: scroll;
}

/deep/ .redcolor-input .el-input__inner {
    color: red;
}


</style>
